﻿@page "/components/timepicker"

<DocsPage>
    <DocsPageHeader Title="Time Picker">
        <Description>Provides the user with a simple way to select time.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Basic Usage</Title>
                <Description>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: Always use the two-way binding <CodeInline>@@bind-Time</CodeInline> to bind to a field of type <CodeInline>TimeSpan?</CodeInline></MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerBasicUsageExample />
            </SectionContent>
            <SectionSource Code="TimePickerBasicUsageExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Dialog Mode</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerDialogExample />
            </SectionContent>
            <SectionSource Code="TimePickerDialogExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Static Mode</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TimePickerStaticExample />
            </SectionContent>
            <SectionSource Code="TimePickerStaticExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Open to Minutes</Title>
                <Description>By default MudTimePicker opens the hours editor and then switches into the minutes editor.  By setting <CodeInline>OpenTo="OpenTo.Minutes"</CodeInline> it will open the minutes editor instead.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerViewsExample />
            </SectionContent>
            <SectionSource Code="TimePickerViewsExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Edit Mode</Title>
                <Description>By setting the <CodeInline>TimeEditMode</CodeInline> you can restrict editing of the time value to allow only changing hours or minutes.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerTimeEditModeExample />
            </SectionContent>
            <SectionSource Code="TimePickerTimeEditModeExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Colors</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="demo-datetime-margin">
                <TimePickerColorExample />
            </SectionContent>
            <SectionSource Code="TimePickerColorExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Elevation</Title>
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter the default value is 0 for static and 8 for inline.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="demo-datetime-margin">
                <TimePickerElevationExample />
            </SectionContent>
            <SectionSource Code="TimePickerElevationExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>